<template>
	<view class="news">
		<uni-nav-bar :statusBar="true" :fixed="true"  @click-right="openAdd">
			<!-- 左边 -->
			<block slot="left">
				<view class="nav-left">
					<view class="icon iconfont icon-qiandao" @tap="signshow"></view>
				</view>
			</block>
			<!-- 中间 -->
			<view class="nav-tab-bar uni-flex">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class="uni-flex" :class="{'active':tabindex==index}"  @tap="changTab(index)">
						{{tab.name}}
						<view class="nav-tab-bar-line" v-if="(tabindex==index)"></view></view>
				</block>
			</view>
			<!-- 右边 -->
			<block slot="right">
				<view class="nav-right uni-flex">
					<view class="icon iconfont icon-bianji1"></view>
				</view>
			</block>
		</uni-nav-bar>

		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabindex" @change="tabChange">
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadmore()">
							<view class="abc" v-for="(item,index) in guanzhu.list" :key="index" >
								<view class="common-list animated fadeInLeft faster" >
									<view class="common-list-l">
										<image :src="item.userpic" mode="widthFix" lazy-load></image>
									</view>
									<view class="common-list-r">
										<view class="list-one">
											<view class="uni-flex">{{item.username}}
											<view class="icon iconfont  tag-sex" :class="[item.sex==0?'icon-nan':'icon-nv']">{{item.age}}</view></view>
											<view class="icon iconfont icon-zengjia" v-show="!item.isguanzhu" @tap="guanzu">关注</view>
										</view>
										<view class="list-two">{{item.title}}</view>
										<view class="list-three uni-flex">
											
											<image :src="item.titlepic" mode="widthFix" lazy-load v-if="item.titlepic"></image>
											
											<template v-if="item.video">
												<view class="common-list-play icon iconfont icon-bofang">
												</view>
												<view class="common-list-playinfo">
													{{item.video.looknum}} 次播放 {{item.video.long}}
												</view>
											</template>
											
											<view class="common-list-share" v-if="item.share">
												<image :src="item.share.titlepic" mode="widthFix" lazy-load></image>
												<view class="">{{item.share.title}}</view>
											</view>
										</view>
										<view class="list-four">
											<view class="">
												{{item.path}}
											</view>
											<view class="uni-flex font">
												<view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view>
												<view class="icon iconfont icon-pinglun1">{{item.commentnum}}</view>
												<view class="icon iconfont icon-dianzan1">{{item.goodnum}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 上拉加载更多 -->
							<load-more :loadtext="guanzhu.loadtext"></load-more>
							
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view scroll-y class="list">
							<!-- 搜索框 -->
							<view class="search-input">
								<input class="uni-input " placeholder-class="icon iconfont icon-sousuo topic-search" placeholder="搜索内容" />
							</view>
							<!-- 轮播图 -->
							<swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
								<block v-for="(item,index) in topic.swiper" :key="index">
									<swiper-item>
										<image :src="item.src" mode="widthFix" lazy-load></image>
									</swiper-item>
								</block>
							</swiper>
							<!-- 热门分类 -->
							<view class="topic-nav">
								<view class="topic-nav-top">
									<view>热门分类</view>
									<view class="top-one" @tap="openTopicNav">
										更多 <view class="icon iconfont icon-jinru"></view>
										</view>
								</view>
									<view class="topic-nav-bottom">
										<block v-for="(items,index2) in topic.nav" :key="index2">
											<view>{{items.name}}</view>
										</block>
									</view>
							</view>
							
							<!-- 最近更新 -->
							<view class="topic-new">
								<view>最近更新</view>
								<block v-for="(itemes,index3) in topic.list" :key="index3" class="animated fadeInLeft faster">
									<view class="topic-list" @tap="opendetail">
										<image :src="itemes.titlepic" mode="widthFix" lazy-load></image>
										<view>
											<view>#{{itemes.title}}#</view>
											<view>{{itemes.desc}}</view>
											<view> 动态 {{itemes.totalnum}} 今日 {{itemes.todaynum}}</view>
										</view>
									</view>
								</block>
							</view>
					</scroll-view>
				</swiper-item>
		
			</swiper>
		</view>

		<!-- 签到 -->
		<view class="all-qiandao" v-show="Qshow"  @tap="hidepopup">
		</view>
		<view class="qiandao" v-show="Qshow">
			<calendar></calendar>
		</view>


	</view>
</template>

<script>
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	import loadMore from "../../components/common/load-more.vue";
	import calendar from '../../components/calendar/Calendar.vue';
	export default {
		components:{
			uniNavBar,
			loadMore,
			calendar
		},
		data() {
			return {
				Qshow:false,
				swiperheight: 700,
				tabindex:0,
				tabBars:[
					{name:"关注",id:"guanzhu"},
					{name:"话题",id:"toppic"}
				],
				topic:{
					swiper:[
						{src:"../../static/demo/banner1.jpg"},
						{src:"../../static/demo/banner2.jpg"},
						{src:"../../static/demo/banner2.jpg"}
					],
					nav:[
						{name:"最新"},
						{name:"游戏"},
						{name:"打卡"},
						{name:"情感"},
						{name:"故事"},
						{name:"喜爱"}
					],
					list:[
						{
							titlepic:"../../static/demo/topicpic/13.jpeg",
							title:"话题名称",
							desc:"我的是话题描述",
							totalnum:50,
							todaynum:20
						},
						{
							titlepic:"../../static/demo/topicpic/12.jpeg",
							title:"话题名称",
							desc:"我的是话题描述",
							totalnum:50,
							todaynum:20
						},
						{
							titlepic:"../../static/demo/topicpic/11.jpeg",
							title:"话题名称",
							desc:"我的是话题描述",
							totalnum:50,
							todaynum:20
						},
						{
							titlepic:"../../static/demo/topicpic/10.jpeg",
							title:"话题名称",
							desc:"我的是话题描述",
							totalnum:50,
							todaynum:20
						},
						{
							titlepic:"../../static/demo/topicpic/9.jpeg",
							title:"话题名称",
							desc:"我的是话题描述",
							totalnum:50,
							todaynum:20
						}
					]
				},
				guanzhu:{
					loadtext:"上拉加载更多",
					list:[
						// 文字
						{
						userpic:"../../static/demo/userpic/12.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 图文
						{
						userpic:"../../static/demo/userpic/12.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/13.jpg",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 视频
						{
						userpic:"../../static/demo/userpic/12.jpg",
						username:"帅宝",
						sex:0,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/13.jpg",
						video:{
							looknum:"20w",
							long:"2:47"
						},
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						},
						// 分享
						{
						userpic:"../../static/demo/userpic/12.jpg",
						username:"帅宝",
						sex:1,//0是男，1是女
						age:25,
						isguanzhu:false,
						title:"我是标题",
						titleoic:"",
						video:false,
						share:{
							title:"我是分享标题",
							titlepic:"../../static/demo/datapic/14.jpg"
						},
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						}
					]
				},
				
				
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperheight = height;
				}
			});
		
		},
		methods: {
			// 签到点击事件
			signshow(){
				this.Qshow=!this.Qshow;
			},
			hidepopup(){
				this.Qshow=false;
			},
			openTopicNav(){
				uni.navigateTo({
					url: '../topic-nav/topic-nav',
				});
			},
			opendetail(){
				uni.navigateTo({
					url: '../topic-detail/topic-detail',
				});
			},
			// 点击切换
			changTab(index){
				this.tabindex=index;
			},
			openAdd(){
				// 打开发布页面
				uni.navigateTo({
					url: '../addInput/addInput',
				});
			},
			guanzu(){
				this.list.isguanzhu=true;
				uni.showToast({
				    title: '已关注'
				});
			},
			// 滑动事件：获取到滑动是内容的tabindex值  从而下划线有滑动效果
			tabChange(e) {
				this.tabindex = e.detail.current;
			},
			// 上拉加载
			loadmore(){
				if (this.guanzhu.loadtext!="上拉加载更多") {
					return;
				} 
				// 修改状态（加载状态）
				this.guanzhu.loadtext="加载中...."
				// 获取数据
				setTimeout(()=> {
					// 获取完成状态
					// 一条模拟数据
					let obj={
						userpic:"../../static/demo/userpic/12.jpg",
						username:"小宝",
						sex:1,//0是男，1是女
						age:16,
						isguanzhu:true,
						title:"我是标题",
						titlepic:"../../static/demo/datapic/10.jpg",
						video:false,
						share:false,
						path:"深圳  龙岗",
						sharenum:20,
						commentnum:30,
						goodnum:20
						};
					this.guanzhu.list.push(obj);
					this.guanzhu.loadtext="上拉加载更多";
				}, 1000);
				// this.guanzhu.loadtext="到底了"
			}
			
			
		}
	}
</script>

<style scoped>
.uni-flex{
	display: flex;
	align-items: center;
	justify-content: center;
}
.abc{
	padding: 3%;
}
.font>view{
	font-size: 28upx
}

.nav-left>view,.nav-right>view{
	font-size: 40upx;
	
}
.nav-left>view{
	color: #FF9619;
}
.nav-left{
	margin-left: 16upx;
}
.nav-right{
	width: 100%;
}
.nav-tab-bar{
	width: 100%;
	margin-left: -20upx;
	position: relative;
}
.nav-tab-bar>view{
	font-size: 32upx;
	padding: 0 15upx;
	font-weight: 600;
	color: #333333;
}
.active{
	color: #333333!important;
}
.nav-tab-bar-line{
	border-bottom: 5upx solid #FEDE33;
	border-top: 5upx solid #FEDE33;
	width: 64upx;
	border-radius: 20upx;
	position: absolute;
	bottom: -6upx;
}
/* 列表 */

.common-list{
	display: flex;
	width: 100%;
}

.common-list-l{
	flex-shrink: 0;
}
.common-list-l image{
	width: 90upx;
	height: 90upx;
	border-radius: 100%;
}
.common-list-r>view:nth-child(3)>image{
	width: 100%;
	border-radius: 10upx;
}
.common-list-r{
	flex: 1;
	margin-left: 15upx;
	border-bottom: 1upx solid #EEEEEE;
	padding-bottom: 10upx;
}
.common-list-r>view:nth-child(1)>view:first-child{
	color: #999999;
	font-size: 32upx;
}
.icon-nv{
	background: #FF698D !important;
}
.tag-sex{
	background: #007AFF;
	color: #FFFFFF;
	font-size: 23upx;
	padding: 5upx 10upx;
	margin-left: 10upx;
	border-radius: 20upx;
	line-height: 28upx;
}
.common-list-r>view:nth-child(1)>view:last-child{
	background: #EEEEEE;
	padding: 0 10upx;
	font-size: 26upx;
}
.common-list-r>view:nth-child(2){
	font-size: 32upx;
	padding: 12upx 0;
}
.common-list-r>view:nth-child(3){
	position: relative;
	margin-bottom: 10upx;
}

.common-list-play{
	position: absolute;
	color: #FFFFFF;
	font-size: 120upx;
}
.common-list-playinfo{
	position: absolute;
	color: #FFFFFF;
	right: 10upx;
	bottom: 10upx;
	background:rgba(51,51,51,0.73);
	border-radius: 20upx;
	padding: 0 20upx;
	font-size: 26upx;
}

.common-list-share{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: #EEEEEE;
	
	width: 100%;
	border-radius: 10upx;
	padding: 10upx;
}
.common-list-share>image{
	width: 200upx;
	height: 150upx;
	margin-right: 10upx;
}


.common-list-r>view:nth-child(4)>view{
	color: #AAAAAA;
}
.common-list-r>view:nth-child(4)>view:nth-child(2)>view{
	margin-left: 10upx;
	padding-left: 5upx;
}

.list-one{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.list-four{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* 话题 */
/* 搜索框 */
.search-input{
	padding: 2%;
}
.search-input>input{
	border-radius: 10upx;
	background: #F4F4F4;
	border: 1upx solid #F8F8F8;
}
.topic-search{
	display: flex;
	justify-content: center;
	font-size: 27upx;
}
/* 轮播图 */

.topic-swiper{
	padding: 0 2% 2% 2%;
}
.topic-swiper image{
	width: 100%;
	border-radius: 10upx;
}
/* 热门分类 */
.topic-nav-top{
	display: flex;
	align-content: center;
	justify-content: space-between;
	margin: 10upx 0;
}
.topic-nav-top >view{
	color: #333333;
	font-size: 32upx;
}
.topic-nav{
	border-bottom: 1upx solid #EEEEEE;
	border-top: 1upx solid #EEEEEE;
	padding: 0 2% 2% 2%;
}
.top-one{
	display: flex;
	color: #9E9E9E;
}


.topic-nav-bottom{
	display: flex;
	
}
.topic-nav-bottom view{
	flex: 1;
	background: #dddddd;
	color: #9E9E9E;
	text-align: center;
	border-radius: 10upx;
	margin: 0 10upx;
}

/* 话题列表 */
.topic-new{
	padding: 2%;
}
.topic-new>view:first-child{
	padding-bottom: 5upx;
	font-size: 32upx;
}
.topic-list{
	padding: 20upx 0;
	border-bottom: 1upx solid #EEEEEE;
	display: flex;
	justify-content: flex-start;
}
.topic-list image{
	width: 150upx;
	height: 150upx;
	border-radius: 10upx;
	margin-right: 20upx;
}
.topic-list>view>view{
	color: #A4A4A4;
}
.topic-list>view>view:first-child{
	color: #333333;
	font-size: 32upx;
}
.qiandao{
		position: fixed;
		top: 80upx;
		background: #FEDE33;
		z-index: 2000;
	}
	.all-qiandao{
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 1999;
	}
</style>
